import React, { useEffect, useState } from 'react';
import { useEchart } from 'hooklib';
import styles from './bar.css';
import cs from './common.css'
const dayjs = require('dayjs');
const debug = require('debug')('echarts:calendar');

function makeCalendarOption(dataset) {
  const dataset0 = dataset[0];
  // const name0 = dataset0.dimensions[0];
  const name0 = dataset0.dimensions[0];
  const name1 = dataset0.dimensions[1];
  const option = {
    calendar: {
      left: 'center',
      top: 'middle',
      range: dayjs()
        .subtract(1, 'month')
        .format('YYYY-MM'), // 上月的整月
      cellSize: 'auto',
      orient: 'vertical',
      // orient: 'horizontal',
      yearLabel: { show: false },
      monthLabel: {
        show: false,
      },
      dayLabel: {
        show: true,
        firstDay: 1, // 从周一开始
        formatter(params) {
          // const d = echarts.number.parseDate(params.value[0]);
          // return `${d.getDate()}`;
          return params.value[name1];
        },
        color: null,
      },
    },
    visualMap: {
      show: false,
      type: 'continuous',
      realtime: true,
      // min: 0,
      // max: 300,
      calculable: true,
      dimension: 1,
      orient: 'horizontal',
      left: 'center',
      bottom: 20,
      inRange: {
        color: ['#e0ffff', '#006edd'],
        // symbolSize: [30, 100],
        opacity: 0.8,
      },
      controller: {
        // show: true,
        inRange: {
          opacity: 0.5
        }
      }
    },
    series: [{
      type: 'scatter',
      coordinateSystem: 'calendar',
      encode: { time: name0, value: name1 },
      symbolSize: 1,
      label: {
        show: true,
        formatter: function (params) {
          return `${params.value[name0]}\n\n${params.value[name1]}`;
        },
      },
    }, {
      name: 'heatmap',
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: dataset0.source.map((v) => [v.date, v.amount]),
    }],
  };
  return option;
}

// 生成上个月的日历数据
function makeLastMounthDataByDay() {
  const data = [];
  const startDay = dayjs().subtract(1, 'month').startOf('month');
  const endDay = dayjs().subtract(1, 'month').endOf('month');

  const endDate = endDay.date();
  for (let i = 0; i < endDate; i += 1) {
    data.push({
      date: startDay.add(i, 'day').format('YYYY-MM-DD'), // like 2020-10-29
      amount: Math.floor((Math.random() * 100) + 100), // 100-200
    });
  }
  return data;
}

const makeStandardDataSource = () => ({
  dimensions: ['date', 'amount', 'label'],
  source: makeLastMounthDataByDay(),
});

const standardDataSource = [makeStandardDataSource()];
const calendarOption = makeCalendarOption(standardDataSource);

export default function Calendar() {
  const [refChart, onChartMount] = useEchart();
  const [option] = useState(() => ({
    dataset: standardDataSource,
    ...calendarOption,
  }));

  useEffect(() => {
    refChart.current.setOption(option);
  }, [option]);

  return (
    <div className={styles.normal}>
      <h1>Page calendar</h1>
      <div ref={onChartMount} className={cs.chart}></div>
    </div>
  );
}
